import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          useMaterial3: false,
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: const Text("Flutter App"),
          ),
          body: const MyHome(),
        )
    );
  }
}

class MyHome extends StatefulWidget {
  const MyHome({super.key});

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {

  // 创建TextEditingController对象,用于修改和获取input内的值
  final TextEditingController _controller = TextEditingController();

  // 创建焦点对象
  FocusNode _nameFocusNode = FocusNode();
  FocusNode _passwordFocusNode = FocusNode();

  // 焦点状态变量
  bool _nameFocus = false;
  bool _passwordFocus = false;

  @override
  void initState() {
    super.initState();
    // 监听焦点变化
    _nameFocusNode.addListener(_handleNameFocusChange);
    _passwordFocusNode.addListener(_handlePasswordFocusChange);
    _controller.addListener(() {
      print("密码控件的值:${_controller.text}");
    });
  }

  @override
  void dispose() {
    super.dispose();
    // 移除焦点监听
    _nameFocusNode.dispose();
    _passwordFocusNode.dispose();
  }

  void _handleNameFocusChange() {
    // 处理姓名输入框焦点变化
    setState(() {
      _nameFocus = _nameFocusNode.hasFocus;
    });
  }

  void _handlePasswordFocusChange() {
    // 处理密码输入框焦点变化
    setState(() {
      _passwordFocus = _passwordFocusNode.hasFocus;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text("登录",style: TextStyle(fontSize: 18)),
          const SizedBox(height: 16,),
          TextField(
            //设置焦点对象
            focusNode:_nameFocusNode,
            //设置样式
            decoration: InputDecoration(
              //是否填充背景色
              filled: true,
              //设置填充背景颜色
              fillColor: _nameFocus ? Colors.lightBlue[100] : Colors.grey[200],
              //设置边框
              border: const OutlineInputBorder(),
              //设置提示语
              hintText: "请输入姓名",
              //设置样式
              hintStyle: const TextStyle(color: Colors.grey),
              //设置前置Icon
              prefixIcon: const Icon(Icons.person)
            ),
          ),
          const SizedBox(height: 16,),
          TextField(
            focusNode: _passwordFocusNode,
            //设置对应的TextEditingController
            controller: _controller,
            //是否隐藏输入内容,常用于密码框
            obscureText: true,
            decoration: InputDecoration(
              filled: false,
              fillColor: _passwordFocus ? Colors.lightBlue[100] : Colors.grey[200],
              border: const OutlineInputBorder(),
              hintText: "请输入密码",
              hintStyle: const TextStyle(color: Colors.grey),
              prefixIcon: const Icon(Icons.password)
            ),
          ),
          const SizedBox(height: 16,),
          TextField(
            //指定键盘输入类型
            keyboardType: TextInputType.emailAddress,
            //键盘操作按钮的类型，例如完成、继续等
            textInputAction: TextInputAction.done,
            decoration: InputDecoration(
              filled: false,
              border: OutlineInputBorder(),
              hintText: "请输入邮箱",
              prefixIcon: Icon(Icons.email)
            ),
            onChanged: (text){
              //绑定onChange事件,打印组件值
              print("邮箱输入的值为:$text");
            },
          ),
          ElevatedButton(onPressed: (){
            //手动触发聚焦到某个组件
            _passwordFocusNode.requestFocus();
            //打印对应组件的值
            var text=  _controller.text;
            print(text);
          }, child: Text("提交")),
        ],
      ),
    );
  }
}
